<script>
import dayjs from 'dayjs'
export default {
  data() {
    return {
      // 系统定义类别
      sysTypeList: [],
      // 筛选需要的名字
      filter: {
        categoryName: ''
      },
      page: {
        pageNum: 1,
        pageSize: 20,
        total: 0
      },
      // 表格相关状态
      table: {
        data: [],
        loading: false
      },
      // 弹出框
      dialogVisible: false,
      categoryId: null,
      // 默认新增
      isInsert: true,
      // 表单相关的状态和校验规则
      ruleForm: {
        categoryName: '',
        orderNum: '',
        remark: ''
      },
      rules: {
        categoryName: [{ required: true, message: '产品分类名称不能为空', trigger: 'blur' }]
      }
    }
  },
  methods: {
    // 获取系统定义类别
    async querySysTypeList() {
      let arr = await this.$API.category.querySysType()
      this.sysTypeList = Object.freeze(arr)
    },
    // 获取产品分类列表
    async queryCateDataList() {
      this.table.loading = true
      let {
        page: { pageNum, pageSize },
        filter: { categoryName }
      } = this
      try {
        let { code, rows, total } = await this.$API.category.queryCateData({
          pageNum,
          pageSize,
          categoryName
        })
        if (+code !== 200) {
          rows = []
        }
        this.table.data = Object.freeze(rows)

        this.page.total = total
      } catch (_) {}
      this.table.loading = false
    },
    // 格式化系统定义
    formatterSysType(row, column, cellValue) {
      let item = this.sysTypeList.find((item) => +item.dictSort === +cellValue)
      if (!item) return null
      return item.dictLabel
    },
    // 格式化时间
    formatterTime({ createTime }) {
      return dayjs(createTime).format('YYYY-MM-DD')
    },
    // 重置按钮
    resetFilter() {
      this.filter.categoryName = ''
      this.queryCateDataList()
    },
    // 触发搜索按钮
    triggerSearch() {
      // 当在其他页码搜索时，直接跳转到第一页
      this.page.pageNum = 1
      this.queryCateDataList()
    },

    // 触发新增按钮
    insertCategory() {
      this.isInsert = true
      this.dialogVisible = true
    },
    // 触发显示详情
    async queryCateDetail(row) {
      let { categoryName, orderNum, remark } = row
      this.isInsert = false
      this.dialogVisible = true

      this.ruleForm = {
        categoryName,
        orderNum,
        remark
      }
    },
    // 关闭弹出框
    async closeDialog() {
      this.dialogVisible = false
      this.$refs.formIns.resetFields()
      this.ruleForm = {
        categoryName: '',
        orderNum: '',
        remark: ''
      }
    },
    // 确认按钮
    async submit() {
      try {
        await this.$refs.formIns.validate()

        let body = this.ruleForm
        let { code } = await this.$API.category.insertCateData(body)
        if (+code !== 200) {
          this.$message.error('新增产品分类失败！')
          return
        }
        this.$message.success('新增产品分类成功！')

        this.closeDialog()
        this.queryCateDataList()
      } catch (_) {}
    }
  },
  created() {
    this.querySysTypeList()
    this.queryCateDataList()
  }
}
</script>

<template>
  <div class="category-box">

    <!-- 筛选过滤区域 -->
    <el-card class="filter-box">
      <div class="filter">
        <div class="form-demo">
          <label>分类名称</label>
          <el-input placeholder="请输入产品分类名称" v-model.trim="filter.categoryName" @keydown.native.enter="triggerSearch" />
        </div>
        <div class="form-demo">
          <button-again icon="el-icon-search" type="primary" size="small" @click="triggerSearch">搜索</button-again>
          <el-button icon="el-icon-refresh" size="small" @click="resetFilter">重置</el-button>
        </div>
      </div>
      <div class="handle">
        <el-tag class="el-icon-plus" @click="insertCategory">新增</el-tag>
      </div>
    </el-card>

    <!-- 表单区域 -->
    <el-card class="table-box">
      <el-table stripe :data="table.data" v-loading="table.loading">
        <el-table-column label="产品分类名称" prop="categoryName" align="center" min-width="8%" />
        <el-table-column label="备注" prop="remark" align="center" min-width="15%" />
        <el-table-column label="系统定义" prop="isSys" :formatter="formatterSysType" align="center" min-width="8%" />
        <el-table-column label="显示顺序" prop="orderNum" align="center" min-width="8%" />
        <el-table-column label="创建时间" prop="createTime" :formatter="formatterTime" align="center" min-width="8%" />
        <el-table-column label="操作" align="center" min-width="8%">
          <template v-slot="{row}">
            <el-button type="primary" size="small" icon="el-icon-view" @click="queryCateDetail(row)">显示</el-button>
          </template>
        </el-table-column>

        <template #append>
          <el-pagination background layout="total, sizes, prev, pager, next" hide-on-single-page :total="page.total" :current-page.sync="page.pageNum" :page-size.sync="page.pageSize" @size-change="queryCateDataList" @current-change="queryCateDataList">
          </el-pagination>
        </template>

      </el-table>
    </el-card>

    <!-- 弹出层 -->
    <el-dialog title="产品分类" top="5vh" width="500px" :visible="dialogVisible" :before-close="closeDialog" :close-on-click-modal="false" :close-on-press-escape="false">

      <el-form label-width="85px" :model="ruleForm" :rules="rules" ref="formIns">
        <el-form-item label="分类名称" prop="categoryName">
          <el-input placeholder="请输入产品分类名称" v-model.trim="ruleForm.categoryName" />
        </el-form-item>
        <el-form-item label="显示顺序" prop="orderNum">
          <el-input-number controls-position="right" v-model="ruleForm.orderNum"></el-input-number>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input type="textarea" placeholder="请输入产品分类名称" v-model.trim="ruleForm.remark" />
        </el-form-item>
      </el-form>

      <template #footer>
        <button-again type="primary" @click="submit" v-show="isInsert">确认提交</button-again>
        <el-button @click="closeDialog">取消</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<style lang="less" scoped>
.category-box {
  .filter-box {
    box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1);

    :deep(.el-card__body) {
      display: flex;
      justify-content: space-between;

      .filter {
        display: flex;
        align-items: center;
        .form-demo {
          margin-right: 10px;
          label {
            padding-right: 10px;
          }
          .el-input {
            width: 240px;
            .el-input__inner {
              height: 30px;
              line-height: 30px;
            }
          }
        }
      }
      .handle {
        .el-tag {
          cursor: pointer;
        }
      }
    }
  }
  .table-box {
    position: relative;
    margin-top: 10px;
    box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1);

    :deep(.el-card__body) {
      padding: 0;
    }
    .el-table {
      position: absolute;
      box-sizing: border-box;
      padding: 15px;
      width: 100%;
    }
    .el-pagination {
      // position: absolute;
      margin-top: 15px;
      text-align: right;
    }
  }
  .el-table::before {
    height: 0;
  }
  .el-card {
    overflow: initial;
  }
}
</style>